<%--
  Created by IntelliJ IDEA.
  User: eternal
  Date: 2024/11/9
  Time: 11:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="../css/date.css" />
  <link rel="stylesheet" href="../css/nav.css" />
  <link rel="stylesheet" href="../css/xiangqing.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<jsp:include page="nav.jsp"/>
<div class="calendar-container">
  <div class="calendar">
    <div class="calendar-header">
      <button class="prev-month" onclick="changeMonth(-1)">&lt;</button>
      <h2 id="calendar-title">2024年11月</h2>
      <button class="next-month" onclick="changeMonth(1)">&gt;</button>
    </div>
    <div class="calendar-days">
      <div>日</div>
      <div>一</div>
      <div>二</div>
      <div>三</div>
      <div>四</div>
      <div>五</div>
      <div>六</div>
    </div>
    <div class="calendar-dates" id="calendar-dates"></div>
  </div>
  <!-- 显示选中日期的区域 -->
  <div>
    <div class="selected-date-display">
      <div>
        <label>服务名称：</label>
        <span class="service_name" id="product-name"></span>
      </div>

      <div>
        <label>选择的日期：</label>
        <span id="selected-date-text" class="service_date">未选择</span>
        <span class="error-msg" id="date-error"></span>
      </div>

      <div>
        <label>预约时间段：</label>
        <span>
          <select class="appointment-select service_period" id="timeSlot" name="timeSlot" onchange="validateTimeSlot(this)">
              <option value="">请选择时间段</option>
              <option value="1" data-time="09:00">09:00-10:00</option>
              <option value="2" data-time="10:00">10:00-11:00</option>
              <option value="3" data-time="11:00">11:00-12:00</option>
              <option value="4" data-time="14:00">14:00-15:00</option>
              <option value="5" data-time="15:00">15:00-16:00</option>
              <option value="6" data-time="16:00">16:00-17:00</option>
          </select>
        <span class="error-msg" id="timeSlot-error"></span>
        </span>

      </div>

      <div>
        <label>美容师：</label>
        <span>
          <select class="appointment-select beauName" id="beautician" name="beautician" onchange="validateBeautician(this)">
          <option value="">请选择美容师</option>
        </select>
        <span class="error-msg" id="beautician-error"></span>
        </span>

      </div>

      <div class="info">
        <label><span class="infoTitle">姓名：</span>
          <input type="text" name="appointmentInfo" class="name" oninput="validateName(this)">
          <span class="error-msg"></span>
        </label>
        <label><span class="infoTitle">手机号：</span>
          <input type="tel" name="appointmentInfo" class="tel" oninput="validateTel(this)">
          <span class="error-msg"></span>
        </label>
        <label><span class="infoTitle">备注：</span>
          <input type="text" name="appointmentInfo" class="remark" oninput="validateRemark(this)">
          <span class="error-msg"></span>
        </label>
      </div>
    </div>
    <input type="button" value="返回" name="back" class="back"/>
    <input type="submit" value="提交" name="submit" class="submit"/>
  </div>
</div>
<div id="successAlert" class="success-alert">预约成功</div>
<script src="../js/date.js"></script>
<script src="../js/xiangqing.js"></script>
<style>
  .error-msg {
    color: red;
    font-size: 12px;
    position: absolute;
    margin-top: -20px;
    margin-left: 5px;
    display: none;
  }
  input.invalid {
    border-color: red;
  }
  #date-error{
    right: 450px;
  }
</style>
</body>
</html>